﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Serialization.aspx.cs" Inherits="Serialization" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>LinqToLfsWorld - Serialisation</title>
	<link rel="Stylesheet" type="text/css" href="StyleSheet.css" />
</head>
<body>
	<form id="form1" runat="server">
	<h1>
		Serialization</h1>
	<p>
		This quick example is designed to show how you can use a quick AJAX loader to fetch
		pubstat information using javascript. If you were using .Net's ScriptManager, this
		would be easy; you can just create a webservice, and have .Net do the serialization
		for you.</p>
	<p>
		If you're using another javascript library (like I've used JQuery here) or you don't
		want to use the built-in ScriptManager (possibly because of the overhead of the
		built-in javascript library files), then you could use LinqToLfsWorld's serialization
		methods to retrieve pubstat information using Javascript.</p>
	<p>
		Enter a racer name below, and click the button to get their stats from LfsWorld
		via an AJAX post:</p>
		
	<input type="text" id="RacernameTextbox" size="20" />
	<input type="button" value="Click" id="PubstatButton" />
	<img src="Images/loading.gif" alt="Loading image" id="LoadingImage" />
	
	<div id="ResultsPanel"></div>

	<script type="text/javascript">

		var loadingImage = $("#LoadingImage");
		loadingImage.hide();

		var button = $("#PubstatButton");

		button.click(function() {

			var racerTextbox = $("#RacernameTextbox");
			var racerName = racerTextbox.val();

			if (racerName == "") {
				alert("Enter a racer name");
				return;
			}
			
			button.attr("disabled", "true");
			loadingImage.show();

			// Get some pubstat data using our PubstatData generic handler, which will return some
			// JSON to us.
			$.ajax({
				type: "POST",
				url: "Handlers/PubstatData.ashx",
				data: "racer=" + racerName,
				dataType: "json",
				success: function(stats) {

					button.removeAttr("disabled");
					loadingImage.hide();

					// Since JQuery has passed the json object for us, we now have an instance
					// of LinqToLfsWorld.RacerStats here in Javascript.
					var resultsPanel = $("#ResultsPanel");

					var html = "<h2>Results</h2>";

					html += "<p><strong>Racer: </strong>" + stats.RacerName + "</p>";
					html += "<p><strong>Wins: </strong>" + stats.Wins + "</p>";
					html += "<p><strong>Poles: </strong>" + stats.PolePositions + "</p>";
					html += "<p><strong>Distance: </strong>" + stats.Distance + "</p>";
					html += "<p><strong>Country: </strong>" + stats.Country + "</p>";
					html += "<p><strong>Last host: </strong>" + stats.LastHost + "</p>";

					resultsPanel.html(html);
				},
				error: function(response) {

					button.removeAttr("disabled");
					loadingImage.hide();

					alert("Error retriving data");
				}
			});

		});
		
	</script>

	</form>
</body>
</html>
